<template>
  <div class="salesman">
   <gl-breadcrumb class="mb15" text="业务员管理"></gl-breadcrumb>
    <div class="main">
      <el-select v-model="userName"
                 placeholder="请选择公司"
                 class="mr20"
                 @change='companyValue' clearable>
        <el-option v-for="item in companyList"
                   :key="item.value"
                   :label="item.company_name"
                   :value="item.company_id">
        </el-option>
      </el-select>
      <el-select v-model="type"
                 placeholder="请选择状态"
                 class="mr20"
                 @change='typeValue' clearable>
        <el-option v-for="item in typeList"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
        </el-option>
      </el-select>
      <el-input class="ipt"
                v-model="input"
                placeholder="请输入业务员名称"></el-input>
      <el-button type="primary"
                
                 @click="search" icon="el-icon-search">搜索</el-button>
      <el-button type="primary"
                 @click="openAdd" icon="el-icon-plus">新建</el-button>
      <div class="table">
        <gl-table :columns='list'
                  :data="lists"
                  class="gl-table"
                  @button="changeButton">
        </gl-table>
      </div>
      <gl-pagination :total='totals'
                     class="page"
                     :curr="curr"
                     :size="limits"
                     @callback='changePage'></gl-pagination>
    </div>
    <gldelbtn :show="isShow"
              :text='text'
              @cancel="canceled"
              @determine='defineCallback'></gldelbtn>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import tools from '../../../../mixins/tools/index'
export default {
  name: 'Salesman',
  components: {},
  data() {
    return {
      userName: '', // 角色
      companyList: [], // 公司列表
      type: '', // 状态
      typeList: [
        {
          value: '1',
          label: '正常'
        },
        {
          value: '2',
          label: '禁用'
        }
      ],
      input: '',
      list: [
        { label: '业务员', prop: 'bus_name' },
        { label: '联系方式', prop: 'phone' },
        { label: '所属公司', prop: 'company_name' },
        { label: '创建日期', prop: 'create_time' },
        { label: '状态', prop: 'status' },
        { label: '操作', prop: '', btns: ['编辑', '删除'] }
      ],
      lists: [],
      totals: '',
      curr: 1,
      limits: 10,
      tValue: '',
      cValue: '',
      isShow: false,
      text: '',
      bus_id: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  watch: {
    input() {
      if (!this.input) {
        this.getSalesman()
      }
    }
  },
  methods: {
    ...mapMutations(['setListInfo']),
    // 操作
    changeButton(val) {
      if (val.index == 0) {
        // console.log('编辑')
        this.$router.push({
          name: 'SalesmanAdd',
          query: {
            num: 1
          }
        })
        this.setListInfo(val.row)
      } else {
        // console.log('删除')
        this.isShow = true
        this.text = val.row.bus_name
        this.bus_id = val.row.bus_id
      }
    },
    // 新建
    openAdd() {
      this.$router.push('/setting/salesman/salesmanAdd')
    },
    // 搜索
    search() {
      this.curr = 1
      this.getSalesman()
    },
    companyValue(val) {
      this.cValue = val
      this.curr = 1
      this.getSalesman()
    },
    typeValue(val) {
      this.tValue = val
      this.curr = 1
      this.getSalesman()
    },
    // 业务员列表
    getSalesman() {
      let params = {
        curr: this.curr,
        limits: this.limits,
        status: this.tValue,
        company_id: this.cValue,
        keyword: this.input
      }
      this.http
        .$post('admin/salesman.Api/lists', params,{loading:true})
        .then(res => {
          this.totals = res.total
          this.lists = res.list
          this.lists.map(val => {
            if (val.status == 1) {
              val.status = '正常'
            } else if (val.status == 2) {
              val.status = '禁用'
            }
            val.create_time = tools.formatDate(val.create_time, 'Y-MM-DD')
          })
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
    // 分页
    changePage(val) {
      this.curr = val.curr
      this.limits = val.size
      this.getSalesman()
    },
    // 验证码确定
    defineCallback(code, vCode) {
      if (vCode == code) {
        // console.log('删除成功')

        this.http
          .$post('admin/salesman.Api/delete', {
            bus_id: this.bus_id
          })
          .then(res => {
            this.curr = 1;
            this.getSalesman()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          })
          .catch(err => {
            this.$message.error(err.msg)
          })
        this.isShow = false
      } else {
   
        this.$message.error('验证码不正确')
      }
    },
    // 关闭
    canceled() {
      this.isShow = false
    }
  },
  created() {
    this.getSalesman()
    // 请求公司
    this.http
      .$post('admin/customer.api/list_company', {
        company_id: this.userInfo.company_id
      })
      .then(res => {
        this.companyList = res
      })
      .catch(err => {
        this.$message.error(err.msg)
      })
  },
  mounted() {}
}
</script>
<style lang='less' scoped>
/deep/ .el-dialog__header {
  border-bottom: 1px solid rgba(235, 235, 235, 1);
}

.salesman {

  .main {
    margin-top: 20px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px 20px;
   
    .ipt {
      width: 20%;
      padding-right: 20px;
    }
    .btn {
      margin: 0 10px 0 0 ;
    }
    .table {
      padding-top: 20px;
    }
    .page {
      padding-bottom: 40px;
    }
  }
}
</style>